
<template>
  <div>
    <a-form :form="form">
      <a-form-item
        label="任务名称"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="decorator.taskName" />
      </a-form-item>
      <a-form-item
        label="开始时间"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >

        <a-date-picker
          style="width: 100%"
          v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]"
        />
      </a-form-item>
    </a-form>
    {{msg}}
    <!-- 表格 -->
    <standard-table
      ref="tableChildren"
      :pagination="false"
      :columns="columns"
      :bordered=true
      :dataSource="dataSource"
    >
      <span slot="tags">
        313213
      </span>
    </standard-table>
    <div style="text-align:center">
      <a-button @click="onOk">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </div>

    <a-button @click="qiantao">123</a-button>
  </div>
</template>

<script>
import { StandardTable } from '@/common/components'
import { decorator } from './decorator'
import { columnsData } from './cloumns.js'
export default {
  name: 'TaskForm',
  components: { StandardTable },
  props: {
    record: {
      type: Object,
      default: null
    },
    msg: {
      type: String
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      form: this.$form.createForm(this),
      decorator: Object.freeze(decorator),
      columns: Object.freeze(columnsData(this.$createElement, this)),
      dataSource: []
    }
  },
  methods: {
    onOk () {
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          this.$emit('ok', values, this.$attrs)
        }
      })
    },
    qiantao (record) {
      let tem = `<div>
        <h2>自定义标题</h2>
        <p>是否确定查看自定义数据</p>
      </div>`
      this.$drawer(tem,
        // modal props
        {
          title: '弹窗三',
          ons: {
            onOK: (dialogCompoents) => {
              // 全部关闭
              dialogCompoents.modalAllClose()
              // 关闭当前
              dialogCompoents.selfClose()
            }
          }
        }
      )
    },
    cancel () {
      this.$attrs.selfClose()
    }
  }
}
</script>
